<template>
    <div class="news">
        <!--导航区  -->
        <ul>
            <li v-for="item in newsList" :key="item.id">
                <!-- 写法1 <RouterLink :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{ item.title }}</RouterLink> -->
                <!-- 写法2 <RouterLink :to="{
                    path:'/news/detail',
                    query:{
                        id:item.id,
                        title:item.title,
                        content:item.content
                    }
                }">
                    {{ item.title }}
                </RouterLink> -->
                <!-- 写法3 <RouterLink :to="`/news/detail/${item.id}/${item.title}/${item.content}`">{{ item.title }}</RouterLink> -->
                 <RouterLink :to="{
                    name:'detail',
                    params:{
                        id:item.id,
                        title:item.title,
                        content:item.content
                    }
                 }">{{ item.title }}</RouterLink>
            </li>
        </ul>
        <br>
        <!-- 展示区 -->
         <div class="news-content">
            <RouterView></RouterView>
         </div>
    </div>
</template>

<script setup lang="ts" name="news">
    import { reactive } from 'vue';
    const newsList = reactive([
        {id: 1, title: '新闻1@@', content:'aeragaerf'},
        {id: 2, title: '新闻2!!', content:'sertwetr'},
        {id: 3, title: '新闻3$$', content:'dryjhty'},
        {id: 4, title: '新闻4^^', content:'srtghs'},
    ])
</script>

